import React, { Component } from "react";
import "./css/01_tab.css";
import Cinema from "./tabFile/Cinema";
import Film from "./tabFile/Film";
import Center from "./tabFile/Center";
export default class App extends Component {
  state = {
    list: [
      {
        id: 0,
        txt: "电影",
      },
      {
        id: 1,
        txt: "影院",
      },
      {
        id: 2,
        txt: "我的",
      },
    ],
    current: 0,
  };
  retCom(val){
    const componentArr = [<Cinema/>,<Film/>,<Center/>,]
    return componentArr[val]
  }
  render() {
    const { current } = this.state;
    
    return (
      <div>
        {
          this.retCom(current)
        }
        <ul>
          {this.state.list.map((e, index) => {
            return (
              <li onClick={e => this.changeCurrent(index)} className={e.id === current ? "active" : ""} key={e.id}>
                {e.txt}
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
  changeCurrent(val){
    console.log(val);
    this.setState({
      current:val
    })
  }
}
